<template>
	<view class="ckeck-detail">
		<CsCard :type="0" title="预约信息">
			<view class="image-info">
				<view class="item-left">
					<u--image width="264rpx" height="166rpx" :src="image" mode="" :shape="imgShape" :radius="imgRadius">
					</u--image>
				</view>
				<view class="item-right">
					<view class="item-title">暗访机2号</view>
					<view class="item-info">
						<view>
							时间：12:00 - 13:00
						</view>
						<view>
							类型：设备预约
						</view>
					</view>
				</view>
			</view>
			<view class="text-info">
				<view>
					<text>申请人：</text><text>黄友军</text>
				</view>
				<view>
					<text>申请时间：</text><text>2022-04-02 14:07</text>
				</view>
				<view>
					<text>使用院系：</text><text>节目技术中心</text>
				</view>
				<view>
					<text>使用班级：</text><text>技术</text>
				</view>
				<view>
					<text>条码：</text><text>SYDX03E</text>
				</view>
				<view>
					<text>机房：</text><text>设备收发</text>
				</view>
			</view>
		</CsCard>
		<CsCard title="审批详情">
			<u-line></u-line>
			<u-steps :current="action" direction="column" activeColor="#F4883F">
				<u-steps-item>
					<view class="flow current" slot="icon">
						<view class="slot-icon current">1</view>
						<view class="slot-text">申请</view>
					</view>
					<view class="check-info" slot="desc">
						<view class="">
							<text>申请人：</text><text>黄友军</text>
						</view>
						<view class="">
							<text>审批模式：</text><text>一人通过可向下流传</text>
						</view>
						<view class="">
							<text>审批时间：</text><text>2022-04-02 14:07</text>
						</view>
						<view class="">
							<text>审批意见：</text><text>提交申请</text>
						</view>
					</view>
				</u-steps-item>
				<u-steps-item>
					<view class="flow current" slot="icon">
						<view class="slot-icon current">2</view>
						<view class="slot-text">审批</view>
					</view>
					<view class="check-info" slot="desc">
						<view class="">
							<text>申请人：</text><text>自由指定</text>
						</view>
						<view class="">
							<text>审批模式：</text><text>一人通过可向下流传</text>
						</view>
						<view class="">
							<text>审批时间：</text><text>2022-04-02 14:07</text>
						</view>
						<view class="">
							<text>审批意见：</text><text>提交申请</text>
						</view>
					</view>
				</u-steps-item>
				<u-steps-item>
					<view class="flow" slot="icon">
						<view class="slot-icon">3</view>
						<view class="slot-text">结束</view>
					</view>
					<view class="check-info" slot="desc">
						<view class="">
							<text>申请人：</text><text>自由指定</text>
						</view>
						<view class="">
							<text>审批模式：</text><text>一人通过可向下流传</text>
						</view>
						<view class="">
							<text>审批时间：</text><text>2022-04-02 14:07</text>
						</view>
						<view class="">
							<text>审批意见：</text><text>提交申请</text>
						</view>
					</view>
				</u-steps-item>
			</u-steps>
		</CsCard>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				action: 1,
				actionStyle: []
			};
		}
	}
</script>

<style lang="scss">
	.ckeck-detail {
		min-height: 100vh;
		padding: 52rpx 18rpx;
		background-color: #F6F6F6;

		.image-info {
			margin: 38rpx 0;
			display: flex;

			.item-left {
				width: 264rpx;
				height: 166rpx;
			}

			.item-right {

				width: 100%;
				height: 100%;
				margin-left: 32rpx;

				.item-title {
					font-size: 16px;
				}

				.item-info {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					font-size: 12px;
					color: #666666;
					margin-top: 20rpx;
				}
			}
		}

		.text-info {
			&>view {
				display: flex;
				justify-content: space-between;
				font-size: 14px;
				color: #999999;
				margin-top: 22rpx;
			}
		}

		.u-line {
			margin: 16rpx 0 !important;
		}

		.u-steps-item {
			.u-steps-item__wrapper--column {
				.u-steps-item__line--column {
					left: 12px;
				}

				.flow {
					width: 24px;
					display: flex;
					flex-direction: column;
					align-items: center;
					color: #C6C6C6;

					.slot-icon {
						width: 21px;
						height: 21px;
						border-radius: 100px;
						border: 1rpx solid #C6C6C6;
						font-size: 12px;
						line-height: 21px;
						text-align: center;
					}

					.slot-text {
						font-size: 12px;
					}
				}
			}



		}

		.check-info {
			margin-left: 46rpx;
			color: #666666;
			font-size: 12px;
		}
	}
	.current {
		border-color: #F4883F !important;
		color: #F4883F !important;
	}
</style>
